import { GridView, ScrollView, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useEffect } from 'react'
import { Card, CdnImage, FloatAddButton } from '@/ui-components'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import { getTreasuryGoodsList } from '@/network/treasury'
import to from 'await-to-js'
import { map } from 'lodash'
import { TreasuryGoods, TreasuryGoodsChangeModeLabels } from '@/types'
import { setTreasuryGoodsList } from '@/store/treasurySlice'
import './index.scss'

export default function TreasuryMarket() {

  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)
  const treasuryGoodsList = useAppSelector(state => state.treasury.goodsList)
  const userTreasury = useAppSelector(state => state.treasury.userTreasury)
  const dispatch = useAppDispatch()

  useEffect(() => {
    const initTreasuryMarket = async () => {
      const [err, treasuryGoodsList] = await to(getTreasuryGoodsList(treasuryId, { hideLoading: true }))
      if (err) return
      dispatch(setTreasuryGoodsList(treasuryGoodsList))
    }

    initTreasuryMarket()
  }, [userTreasury])

  return (
    <View className='treasury-market h-100'>
      <FloatAddButton onClick={() => Taro.navigateTo({ url: '/subpages/treasury/goods/create/index' })} />
      <View className='pv-medium bg-primary row-start-center'>
        <View className='text-center flex-1 text-primary border-right'>我的积分：<Text className='success'>{userTreasury.userScore}</Text></View>
        <View className='text-center flex-1 text-primary'>兑换记录</View>
      </View>
      <ScrollView className='h-100'>
        <GridView type='masonry'>
          {
            map(treasuryGoodsList, (goods: TreasuryGoods) => (
              <View className='treasury-goods-item' key={goods.treasuryGoodsId}>
                <Card className='ma-normal'>
                  <View className='goods-item-top'>
                    <CdnImage src={goods.image} className='treasury-goods-image' />
                    <View className='treasury-goods-remain-count p-small font-size-small'>
                      库存：<Text className='red'>{goods.remainCount}</Text>
                    </View>
                  </View>
                  <View className='treasury-goods-content pv-medium ph-medium'>
                    <View className='text-title'>{goods.name}</View>
                    <View className='treasury-goods-exchange text-small-primary mt-small'>
                      需<Text className='warning'>{goods.score}</Text>积分（<Text>{TreasuryGoodsChangeModeLabels[goods.changeMode]}</Text>）
                    </View>
                  </View>
                  <View className='pv-medium row-start-center border-top-50'>
                    <View
                      className='text-center flex-1 text-primary border-right'
                      onClick={() => Taro.navigateTo({ url: `/subpages/treasury/goods/exchange/index?treasuryGoodsId=${goods.treasuryGoodsId}` })}
                    >
                      自用
                    </View>
                    <View
                      className='text-center flex-1 text-primary'
                      onClick={() => Taro.navigateTo({ url: `/subpages/treasury/goods/gift/index?treasuryGoodsId=${goods.treasuryGoodsId}` })}
                    >
                      赠送
                    </View>
                  </View>
                </Card>
              </View>
            ))
          }
        </GridView>
      </ScrollView>
    </View>
  )
}
